<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>12.冒泡事件</title>
</head>

<body>
    <div class="parent">
        <div class="child">
            <button class="btn">点击</button>
        </div>
    </div>
    <script>
        /*
         *冒泡事件：
         * 1.addEventListener(事件名,函数,是否冒泡)：第三个参数默认为false，即为冒泡事件
         * 2.冒泡事件是从子元素向父元素传递
         * 3.onXXX,addEventListener可以传递冒泡事件
         * */
        var btn = document.querySelector(".btn");
        var child = document.querySelector(".child");
        var parent = document.querySelector(".parent");
        var body = document.querySelector("body");
        var html = document.querySelector("html");
        btn.addEventListener("click", function(event) {
            console.log("btn");
            //在这里设置一个属性，在下面检查event是否是同一个事件对象
            event.bubble = "maopao";
        })
        child.addEventListener("click", function(event) {
            console.log("child");
            //在这里打印事件对象，在target属性能看到冒泡事件
            console.log(event);
        })
        parent.addEventListener("click", function(event) {
            console.log("parent");
        })
        body.addEventListener("click", function(event) {
            console.log("body");
        })
        html.addEventListener("click", function(event) {
            console.log("html");
        })
    </script>
</body>

</html>